<template>
	<view class="con">
		<view>
			<view class="input">
				<text class="phone">{{phone}}</text><text class="ma" @click="getma">{{ma}}</text>
			</view>
			<input type="number" class="input" placeholder="请输入验证码" v-model="smsVerifyCode" >
			<input type="password" class="input" placeholder="请输入6位支付密码" v-model="paymentPassword" :maxlength="6">
			<input type="password" class="input" placeholder="确认密码" v-model="pwsd" :maxlength="6">
			<view class="bbb">
				<view class="jd" @click="submit">
					确认提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getsms
	} from "../../api/login.js"
	import{setpwd}from"../../api/user.js"
	export default {
		data() {
			return {
				ma: "获取验证码",
				phone:"",
				smsVerifyCode:"",
				paymentPassword:"",
				pwsd:""
			}
		},
		onLoad() {
			this.phone=uni.getStorageSync("user").phone
		},
		methods: {
			// 获取验证码
			async getma() {
				if (this.ma == "获取验证码") {
					let res = await this.get(getsms, {
						mobile: this.phone
					})
					this.msg("验证码发送成功")
					if (this.ma == "获取验证码") {
						let time = 59;
						let timer = setInterval(() => {
							if (time === 0) {
								clearInterval(timer);
								this.ma = "获取验证码"
							} else {
								this.ma = time + "s后获取";
								time--
							}
						}, 1000);
					}
				} else {
					this.msg("稍后重试", "none")
				}
			},
			async submit(){
				if(this.smsVerifyCode.trim()==""){
					this.msg("验证码未填写", "none")
					return
				}
				if(this.paymentPassword.trim()==""){
					this.msg("密码未填写", "none")
					return
				}
				console.log(this.pwsd.trim())
				if(this.pwsd.trim()==""){
					this.msg("确认密码未填写","none")
					return
				}
				if(this.pwsd.trim()!=this.paymentPassword.trim()){
					this.msg("2次输入的密码不一致", "none")
					return
				}
				let res=await this.post(setpwd,{
					phone:this.phone,
					smsVerifyCode:this.smsVerifyCode,
					paymentPassword:this.paymentPassword
				})
				this.msg("设置成功")
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
			}
		}
	}
</script>

<style>
	.phone {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}

	.ma {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F09238;
		opacity: 1;
	}

	.bbb {
		display: flex;
		justify-content: center;
		margin-top: 200rpx;
	}

	.input {
		height: 100rpx;
		padding-left: 40rpx;
		border-bottom: 1px #ECECEC solid;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 30rpx;
	}

	.box {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		width: 540rpx;
		justify-content: space-between;
	}

	.jd {
		width: 240rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 12rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
	}

	.bjd {
		width: 240rpx;
		height: 70rpx;
		border: 1px solid #F09238;
		opacity: 1;
		border-radius: 12rpx;
		color: #F09238;
		text-align: center;
		line-height: 70rpx;
	}

	.t {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.type_1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
	}
</style>
